<template>
	<el-dialog ref="dialog" :title="handleName + '编目信息'" :visible.sync="visible" width="1140px" append-to-body @close="handleDialogClose()">
		<el-form ref="form" size="medium" :model="formData" :rules="formRules" label-width="80px" class="catalog_form_wrapper" v-if="visible">
			<el-form-item label="编目名称" prop="name">
				<div class="name_box">
					<el-input v-model="formData.name"></el-input>
					模板名称不能超过15个汉字(30个字符)
				</div>
			</el-form-item>
			<div class="classify_head">
				<h2>编目规则</h2>
				<el-button type="text" @click="handleRulesClassify()">添加二级编目</el-button>
			</div>
			<template v-if="catalogData.length > 0">
				<el-tabs v-model="checkedClassify" class="classify_tabs">
					<el-tab-pane v-for="(item, index) in catalogData" :key="item.id" :name="item.id">
						<template slot="label">
							{{ item.name }}
							<el-button-group>
								<el-button type="text" icon="el-icon-edit" @click.stop="handleRulesClassify(item, index)"></el-button>
								<el-button type="text" icon="el-icon-delete" @click.stop="handleDelRulesClassify(index)"></el-button>
							</el-button-group>
						</template>
					</el-tab-pane>
				</el-tabs>
				<rules-table :data="rulesListData"></rules-table>
			</template>
			<template v-else>
				<el-empty :image-size="200" description="暂无编目规则"></el-empty>
			</template>
		</el-form>
		<template slot="footer">
			<el-button size="medium" @click="visible = false">取消</el-button>
			<el-button size="medium" type="primary" @click="handleSubmitForm">{{ handleName }}</el-button>
		</template>
	</el-dialog>
</template>

<script>
import rulesTable from './rules';
import { addedCatalog, updateCatalog } from '@/api/data/tbNetDefCatalog';
export default {
	components: { rulesTable },
	props: {
		value: Boolean,
		data: {
			type: Object,
			default() {
				return {};
			}
		}
	},
	data() {
		return {
			visible: this.value,
			formData: {},
			formRules: {
				name: [{ required: true, message: '请填写编目名称', trigger: 'blur' }]
			},
			catalogData: [],
			rulesListData: [],
			checkedClassify: ''
		};
	},
	computed: {
		addOrEdit() {
			return Object.keys(this.data).length === 0;
		},
		handleName() {
			return this.addOrEdit ? '新增' : '修改';
		}
	},
	watch: {
		value(flag) {
			this.visible = flag;
		},
		visible(flag) {
			this.$emit('input', flag);
			if (!flag) return false;
			if (this.addOrEdit) {
				this.formData = {};
				this.catalogData = [];
			} else {
				this.formData = { ...this.data };
				this.catalogData = this.data.catalogData === '-1' ? [] : JSON.parse(this.data.catalogData);
				this.checkedClassify = this.catalogData.length > 0 ? this.catalogData[0].id : '';
			}
		},
		checkedClassify(val) {
			let rulesObject = this.catalogData.find((item) => item.id === val);
			this.rulesListData = !!rulesObject && !!rulesObject.attribute && Array.isArray(rulesObject.attribute) ? rulesObject.attribute : [];
		}
	},
	mounted() {},
	methods: {
		//添加编目规则分类
		handleRulesClassify(data, index) {
			let that = this;
			let message = !data ? '新增' : '修改';

			that.$prompt(`${message}编目规则分类`, `${message}新增提示`, {
				inputValue: !data ? null : data.name,
				inputValidator(value) {
					if (!value) {
						return '编目规则分类不能为';
					} else if (that.catalogData.some((n) => n.name === value)) {
						return '已存在编目规则分类';
					}
				},
				beforeClose(action, instance, done) {
					if (action === 'confirm') {
						if (!data) {
							that.catalogData.push({ id: that.$genUUID(), name: instance.inputValue });
							if (!that.checkedClassify) {
								that.checkedClassify = that.catalogData[0].id;
							}
						} else {
							that.catalogData[index].name = instance.inputValue;
						}
					}
					done();
				}
			}).catch(() => {});
		},

		//删除编目规则分类
		handleDelRulesClassify(index) {
			let id = this.catalogData[index].id;
			this.catalogData.splice(index, 1);
			if (this.catalogData.length > 0 && this.checkedClassify === id) {
				this.checkedClassify = this.catalogData[0].id;
			}
		},

		//提交编目
		handleSubmitForm() {
			this.$refs['form'].validate((valid) => {
				if (!valid) return false;
				this.formSubmitRequest();
			});
		},

		//表单提交请求
		async formSubmitRequest() {
			let params = { ...this.formData, catalogData: this.catalogData.length === 0 ? '-1' : JSON.stringify(this.catalogData) };
			let handleFunc = this.addOrEdit ? eval(addedCatalog) : eval(updateCatalog);
			let result = await handleFunc(params).then((res) => res.data);
			if (result.code == '0') {
				this.$message.success(this.handleName + '编目定义成功');
				this.visible = false;
				this.$emit('refresh');
			} else {
				this.$message.error(this.handleName + '编目定义失败');
			}
		},

		//关闭弹出框
		handleDialogClose() {
			this.$refs['dialog'].close();
		}
	}
};
</script>

<style lang="scss" scoped>
.catalog_form_wrapper::v-deep {
	width: 100%;
	height: calc(70vh - 122px);
	padding: 10px 0 0;
	.name_box {
		display: flex;
		align-items: center;
		.el-input {
			width: 480px;
			margin-right: 16px;
		}
	}
}
.classify_head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 12px;
	h2 {
		font-size: 15px;
	}
	.el-button {
		padding: 0;
	}
}
.classify_tabs::v-deep {
	.el-tabs__header {
		margin-bottom: 0;
		border-bottom: solid 1px #ebeef5;
	}
	.el-tabs__nav {
		display: flex;
		align-items: center;
	}
	.el-tabs__item {
		display: flex;
		align-items: center;
		padding: 0 16px;
		.el-button {
			margin-left: 5px;
		}
	}
	.el-button-group {
		display: flex;
		align-items: center;
		flex-shrink: 0;
	}
}
</style>
